<!--
 * @Author: 杨光辉_GerhardYang
 * @Date: 2021-02-19 11:40:03
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-09-08 13:14:12
 * @Description: file content
 class="area-container"
-->
<template>
  <div class="cities">
    <a-card
      size="small"
      title="湖南省行政区划:"
      style="width: 300px; user-select: none"
      v-show="visiable"
    >
      <a slot="extra" href="#" @click="onClose">
        <a-icon type="caret-up" />
      </a>
      <a-row>
        <a-col :span="24">
          <a-button
            type="link"
            style="font-size: 16px; font-weight: 600; letter-spacing: 8px"
            @click="locateToArea('430000', '湖南')"
            >湖南</a-button
          >
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430100', '长沙')"
            >长沙</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430200', '株洲')"
            >株洲</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430300', '湘潭')"
            >湘潭</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430600', '岳阳')"
            >岳阳</a-button
          >
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430900', '益阳')"
            >益阳</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430400', '衡阳')"
            >衡阳</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430500', '邵阳')"
            >邵阳</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('431000', '郴州')"
            >郴州</a-button
          >
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('431100', '永州')"
            >永州</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430700', '常德')"
            >常德</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('431300', '娄底')"
            >娄底</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('431200', '怀化')"
            >怀化</a-button
          >
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('430800', '张家界')"
            >张家界</a-button
          >
        </a-col>
        <a-col :span="6">
          <a-button type="link" @click="locateToArea('433100', '湘西州')"
            >湘西州</a-button
          >
        </a-col>
      </a-row>
    </a-card>
    <a-card
      size="small"
      style="width: 300px; user-select: none; background-color: snow"
      v-show="areaShow && visiable"
    >
      <a-row>
        <a-col :span="6" v-for="areaData in areaDatas" :key="areaData.code">
          <a-button
            type="link"
            @click="locateToArea(areaData.code, areaData.areaName)"
            style="font-size: 12px"
            >{{ areaData.showName }}</a-button
          >
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import L from "leaflet";

import {
  dataGetFeaturesBySQLParameters,
  dataGetFeaturesBySQL,
} from "@/utils/http/iserverQuery.js";

import allArea from "./allArea.js";

export default {
  data() {
    return {
      areaShow: false,
      visiable: false,
      selectCity: "长沙",
      areaLayer: undefined,
      areaDatas: [],
    };
  },
  computed: {
    map() {
      return this.$store.state.map;
    },
    SearchAreas() {
      return this.$store.state.config.SearchAreas[0];
    },
  },
  mounted() {
    this.locateToArea("430100", "长沙");
    //点击地图空白处关闭窗口
    this.map.on("click", () => {
      this.visiable = false;
      this.areaShow = false;
    });
  },

  methods: {
    onClose() {
      this.visiable = false;
      this.areaShow = false;
    },
    locateToArea(citycode, cityname) {
      if (cityname == "湖南") {
        this.areaDatas = [];
        this.areaShow = false;
      }
      if (allArea[cityname]) {
        if (this.visiable) {
          this.areaShow = true;
        }
        this.areaDatas = allArea[cityname];
      }
      if (this.areaLayer) {
        this.areaLayer.remove();
      }
      this.selectCity = cityname;
      this.$parent.currentCity = cityname;
      this.$parent.currentCityCode = citycode;
      this.querySql(citycode);
      this.$store.commit("setAreaCode", [citycode, cityname]);
    },
    //查询区域
    async querySql(citycode) {
      const datasetNames = this.SearchAreas.datasetnames;
      const sql = `${this.SearchAreas.attributefilterfield} = '${citycode}'`;

      console.log(this.SearchAreas, datasetNames, sql);
      let params = dataGetFeaturesBySQLParameters(datasetNames, sql);

      const dataUrl = this.SearchAreas.url;
      let result = await dataGetFeaturesBySQL(dataUrl, params);
      this.dealresult(result);
    },
    dealresult(result) {
      if (!result) {
        this.$message.destroy();
        this.$message.error("区划服务错误，请联系管理员");

        return;
      } else if (result.totalCount < 1) {
        this.$message.destroy();
        this.$message.warning("暂无数据");

        return;
      }
      //添加区域
      this.areaLayer = L.geoJSON(result.features, {
        color: "#00cccc",
      }).addTo(this.map);
      this.$parent.searchGeometry = this.areaLayer;
      this.map.flyToBounds(this.areaLayer.getBounds());
      //3秒钟后清除区划图层
      setTimeout(() => this.areaLayer.remove(), 3000);
    },
  },
};
</script>
<style lang="less" scoped></style>
